import React, { useState, useEffect } from "react";
import { Grid, Button } from "@arco-design/web-react";
import axios from "axios";
const Row = Grid.Row;
const Col = Grid.Col;

export default function Main() {
  const [seatInfo, setSeatInfo] = useState(new Array(12));
  const [selectSeat, setSelectSeat] = useState(new Set());

  const fetchSeatInfo = async () => {
    const res = await axios.get("http://127.0.0.1:9000/seat-info");
    setSeatInfo(res?.data?.res);
    console.log(res?.data?.res);
  };

  const handleSelect = (s_id) => {
    if (seatInfo[s_id]?.sold === 0) {
      if (selectSeat?.has(s_id)) {
        setSelectSeat((prev) => {
          prev.delete(s_id);
          return new Set(prev);
        });
      } else {
        setSelectSeat((prev) => {
          prev.add(s_id);
          return new Set(prev);
        });
      }
    }
  };

  const handleCancle = () => {
    setSelectSeat(new Set())
  }

  const handleBuySeat = async () => {
    console.log(selectSeat)
    const res = await axios.post('http://127.0.0.1:9000/update-seat', {
      seat: Array.from(selectSeat)
    })
    console.log(res)
    fetchSeatInfo()
  }

  useEffect(() => {
    fetchSeatInfo();
  }, []);

  return (
    <>
      {/* 座位 */}
      <Row>
        {seatInfo?.map((item) => (
          <Col
            span={12}
            key={item?.s_id}
            style={{ height: 30, width: 30 }}
            onClick={() => handleSelect(item?.s_id)}
          >
            <svg
              t="1669205527990"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              p-id="2727"
              width="16"
              height="16"
            >
              <path
                d="M320 448v128h384v-128c0-70.6 57.4-128 128-128h64c0-106-86-192-192-192H320c-106 0-192 86-192 192h64c70.6 0 128 57.4 128 128z m576-64h-64c-35.4 0-64 28.6-64 64v192H256v-192c0-35.4-28.6-64-64-64H128c-70.6 0-128 57.4-128 128 0 47.2 26 88 64 110.2V864c0 17.6 14.4 32 32 32h128c17.6 0 32-14.4 32-32v-32h512v32c0 17.6 14.4 32 32 32h128c17.6 0 32-14.4 32-32V622.2c38-22.2 64-63 64-110.2 0-70.6-57.4-128-128-128z"
                p-id="2728"
                fill={
                  item?.sold
                    ? "#d81e06"
                    : selectSeat.has(item?.s_id)
                    ? "#f4ea2a"
                    : "#1afa29"
                }
              />
            </svg>
          </Col>
        ))}
      </Row>
      {/* label */}
      <Row style={{ marginLeft: 80, height: 30 }}>
        <Col span={8}>
          <span
            style={{
              display: "inline-block",
              height: 16,
              width: 16,
              backgroundColor: "#d81e06",
            }}
          ></span>
          <span>已售</span>
        </Col>
        <Col span={8}>
          <span
            style={{
              display: "inline-block",
              height: 16,
              width: 16,
              backgroundColor: "#f4ea2a",
            }}
          ></span>
          <span>选中</span>
        </Col>
        <Col span={8}>
          <span
            style={{
              display: "inline-block",
              height: 16,
              width: 16,
              backgroundColor: "#1afa29",
            }}
          ></span>
          <span>空闲</span>
        </Col>
      </Row>
      {/* 选座信息 */}
      <Row style={{height:300}}>
        {Array.from(selectSeat)?.map((item) => (
          <Col span={12} key={item} style={{ height: '40px' }}>
            <div style={{margin: 5, border: '1px solid black'}}>
              <div style={{height: 20}}>已经选座</div>
              <div style={{height: 20}}>座位号：{item}</div>
            </div>
          </Col>
        ))}
      </Row>
      <Row style={{height: 100}}>
      <Button type='secondary' onClick={handleCancle} >取消选座</Button>
      <Button type='primary' onClick={handleBuySeat}>确认选座</Button>
      </Row>
    </>
  );
}
